<!DOCTYPE html>
<html lang="en">
<head>
  
<meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">


  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm.min.css">
  <link rel="stylesheet" href="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/css/sm-extend.min.css">
  <script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/common/common/common.js"></script>
  <style>
    li{
      list-style: none;
    }
    a{
      text-decoration: none;
    }
        /*修改标题栏颜色*/
    .bar.bar-nav {
      background-color: #1FCA23;
    }

    /*修改标题栏字体颜色*/
    .bar.bar-nav .title {
      color: #fff;
    }
    
     /*修改工具栏背景颜色*/
    .bar.bar-tab {
      background-color: #FEEA4D;
    }
    #pull-left{
      display:inline-block;
      width: 1.5rem;
      padding-top:0.3rem;
      float: left;
    }
    #pull-left img{
      display: block;
      width: 100%;
    }
    #pull-title{
      display: inline-block;
      width: 6.0rem;
      height: 2.2rem;
      line-height: 2.2rem;
      /* float: left; */
      /* margin-left: 33%; */
      color: #fff;
      font-size: 16px;
      margin-left: calc(50% - 3rem - 1.5rem);
      text-align: center;
    }
    #pull-add{
      display: inline-block;
      width: 2.2rem;
      height: 2.2rem;
      line-height: 2.2rem;
      float: right;
      color: #fff;
      font-size: 16px;
    }
    /*主题颜色*/
    .themecolor{
      background-color: #1FCA23;
    }
    /*修改内容区背景色*/
    body{
      background-color:#eeeeee;
    }

    .list-block{
       margin: 0.5rem 0;
    }
    .list-block .item-inner{
      padding: 0.3rem 0;
      -webkit-justify-content:flex-start;
      justify-content:flex-start;
    }
    .item-title{
      width: 69.2%;
      font-size: 16px;
      text-align: right;
    }
    #school-title{
      width: 82%;
    }
    .item-msg{
      width:25%;
      margin-left:1%;
      color: gray;
      font-size: 14px;
    }
    #school-msg{
      width: 12%;
    }
    /*.item-icon{
      width: 2.0rem;
      height: 2.0rem;
    
    }
    .item-icon img{
      display: block;
      width: 100%;
    }*/
    #exitbtn{
      display: block;
      width: 90%;
      height:2.0rem;
      line-height: 2.0rem;
      text-align: center;
      border-radius:3px;
      color:#fff;
      font-size: 14px;
      border:0;
      float: left;
      margin:8% 5% 5% 5%;
    }

   /*点击小孩姓名显示的下拉页面*/
   #childshow{
     width: 100%;
     height:auto;
     background-color:#ededee;
     position: absolute;
     left: 0;
     top:3.1rem;
     z-index: 200;
     display: none;
   }
   #childshow>ul{
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
   }
   #childshow>ul li{
    width: 100%;
    height: 2.0rem;
    line-height:2.0rem;
    border-bottom:0.05rem solid #A4A4A4;
    text-align: center; 
   }
   #childshow>ul li a{
    color:black;
   }
   /*遮罩层效果*/
 /*   #shade{
    width:100%;
    background:rgba(0,0,0,0.3);
    z-index: 100;
    position: absolute;
    bottom: 0;
    z-index:10;
    display: none;
  }*/
  </style>
</head>
<body>
  
  <div class="page-group">
    <div class="page">
       <!-- 标题栏 -->
        <header class="bar bar-nav">
           <a href="#" id="pull-left" onclick="backclick()"><img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/back@2x.png"></a>
           <span id="pull-title">个人资料</span>
           <span id="pull-add" onclick="addchild()">添加</span>
        </header>

      <!-- 页面内容区域 -->
      <div class="content">
        <div class="list-block" id="childname">
           <ul>
              <li>
                <div class="item-content">  
                 <div class="item-inner" onclick="childshow()">
                      <span class="item-msg" id="childtab">小孩姓名</span>
                      <div class="item-title"></div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
              </li>
           </ul>
        </div>
        <div class="list-block">
          <ul id="itemblock">
          
            <!-- <li>
              <div class="item-content">  
                 <div class="item-inner">
                      <span class="item-msg">姓名</span>
                      <div class="item-title">Tony</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li>
            <li>
              <div class="item-content">  
                 <div class="item-inner">
                      <span class="item-msg">学校</span>
                      <div class="item-title">北京四中中心小学</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li>
            <li>
              <div class="item-content">  
                 <div class="item-inner">
                      <span class="item-msg">年级</span>
                      <div class="item-title">三年级</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li>
            <li>
              <div class="item-content">  
                 <div class="item-inner">
                      <span class="item-msg">班级</span>
                      <div class="item-title">二班</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li>
            <li>
              <div class="item-content">  
                 <div class="item-inner">
                      <span class="item-msg">学号</span>
                      <div class="item-title">2018062012</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li>
            <li>
              <div class="item-content">  
                 <div class="item-inner">
                      <span class="item-msg">修改手机号</span>
                      <div class="item-title">13811102323</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li>
            <li>
              <div class="item-content">  
                 <div class="item-inner">
                      <span class="item-msg">修改密码</span>
                      <div class="item-title">*******</div>
                      <div class="item-icon">
                         <img src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/img/img/img_more_right.png">
                      </div>
                 </div>
              </div>
            </li> -->

          </ul>
        </div>
        <!-- 退出登录按钮 -->
        <a href="#" id="exitbtn" class="themecolor" onclick="clkunbindstu()">解除绑定</a>
        <!-- 点击小孩姓名显示的下拉页面 -->
        <div id="childshow">
           <ul>
             <!-- <li><a href="#">提莫</a></li>
             <li><a href="#">凯特琳</a></li>
             <li><a href="#">薇恩</a></li> -->
           </ul>
        </div>
        <!--遮罩效果 -->
       <!--  <div id="shade" onclick="bodyclick()">
        
        </div> -->
      </div>
    </div>
  </div>

  <!-- !-- 固定的js引用，所有的jQuery 要用 $$ 表示 --> 
<script type="text/javascript" src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>

<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/sm.min.js' charset='utf-8'></script>
<!-- <script type='text/javascript' src='https://gitee.com/huaflower/CommonFile/raw/master/js/sm-extend.min.js' charset='utf-8'></script> -->
<script src="https://gitee.com/huaflower/ReadBook_CommonFile/raw/master/js/js/swiper/swiper.min.js"></script>
<script type="text/javascript">

  var selectstuid = 0;
  
   // 点击返回
   function backclick(){
     native_goto('local/finish');
   }

   // 点击添加小孩跳转到添加小孩页面
   function addchild(){
    native_goto('local/addchild');
   }

  // 点击小孩姓名显示的下拉页面	
  function childshow(){

    // 点击出现遮罩效果
    // var docheight = $$('.content').height(); 
    // $$('#shade').show();
    // $$("#shade").css({ "height": docheight });

    if ($$('#childshow').is(':hidden')) {
        $$('#childshow').show();
    }else{
        $$('#childshow').hide();
        $$('#shade').hide();
    }
  }

  // 点击遮罩层隐藏下拉框
  function bodyclick(){
        // 点击隐藏div
        $$('#childshow').hide();
        // $$('#shade').hide(); 
  }

  
  // 小孩信息列表接口
  function userinfo(){
    var param = {}
    var url = 'apis/userinfo';
    net_request('get',url,param,userinfoSuccessCallBack,errorCallBack);
  }

// 小孩信息详情接口
  function userinfoDetails(){
    var param = {}
    var url = 'apis/userinfo';
    net_request('get',url,param,userinfoDetailsSuccessCallBack,errorCallBack);
  }

  // 成功函数回调 小孩详情
  function userinfoDetailsSuccessCallBack(data){
   
    if (isNotNull(data) && data.success) {
         var databody = data.data;
         if (isNotNull(databody)) {
           var datastu = databody.students;
           if (isNotNull(datastu)) {
             for (var i = 0; i < datastu.length; i++) {
                  
                  var item = datastu[i];
                                 
                  if (isNotNull(item) && item.id == selectstuid) {
                      setuserInfoDetails(item);
                      break;
                  }
             }   
           }           
         }   
    }
 }

    // 成功函数回调 小孩
  function userinfoSuccessCallBack(data){
    // alert(JSON.stringify(data));
    if (isNotNull(data) && data.success) {
         var databody = data.data;
         if (isNotNull(databody)) {
           var datastu = databody.students;
           if (isNotNull(datastu)) {
             var childtitle = '';
             for (var i = 0; i < datastu.length; i++) {
                  
                  var item = datastu[i];
                  
                  if (isNotNull(item)) {
                    if(i == 0){
                      $$('#childtab').html(item.name);
                      selectstuid = item.id;
                      setuserInfoDetails(item);

                    }
                     childtitle += '<li class="child" cid = "'+i+'" ><a href = "">'+ item.name +'</a></li>'
                  }
             }                        
           }

             $$('#childshow ul').html(childtitle);
         }
     
    }

     // 点击child事件
     $$('.child').click(function(){
        // 隐藏下拉框、遮罩层
        $$('#childshow').hide();
        $$('#shade').hide();
        var text = $$(this).text();
        // 当前值赋值给小孩姓名按钮
        $$('#childtab').html(text);
        
        var cid = Number($$(this).attr("cid"));
        selectstuid = datastu[cid].id;

        userinfoDetails();
     });

  }


  //设置学生信息详情
  function setuserInfoDetails(data){
     var html = '';
     if (isNotNull(data)) {

           var schoolname = "";
           var gradename = "";
           var classname = "";

           if(isNotNull(data.school)){
              schoolname = data.school.name;
           }
           if(isNotNull(data.grade)){
              gradename = data.grade.name;
           }
           if(isNotNull(data.school_class)){
              classname = data.school_class.name;
           }

         html = `
                  <li>
                    <div class="item-content">  
                       <div class="item-inner">
                            <span class="item-msg">姓名</span>
                            <div class="item-title">${data.name}</div>
                       </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content">  
                       <div class="item-inner">
                            <span class="item-msg" id="school-msg">学校</span>
                            <div class="item-title" id="school-title">${schoolname}</div>
                       </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content">  
                       <div class="item-inner">
                            <span class="item-msg">年级</span>
                            <div class="item-title">${gradename}</div>
                       </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content">  
                       <div class="item-inner">
                            <span class="item-msg">班级</span>
                            <div class="item-title">${classname}</div>
                       </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content">  
                       <div class="item-inner">
                            <span class="item-msg">学号</span>
                            <div class="item-title">${data.student_no}</div>
                       </div>
                    </div>
                  </li>
                  <li>
                    <div class="item-content">  
                       <div class="item-inner">
                            <span class="item-msg">修改手机号</span>
                            <div class="item-title">${data.mobile}</div>
                       </div>
                    </div>
                  </li>
               `;

     }
     $$('#itemblock').html(html);
    
  }

  // 解除绑定验证
   function clkunbindstu(){
    unbindstu(); 
   }

  // 解除绑定接口
  function unbindstu(){
      
      var param = {
      }
      var url = 'apis/unbindstu?stuid='+selectstuid;
      net_request('get',url,param,unbindstuSuccessCallBack,errorCallBack);
  }

  function unbindstuSuccessCallBack(data){
    // alert(JSON.stringify(data));
     if (isNotNull(data) && data.success) {
          //  解绑成功，刷新数据
          native_showdialog(data.message);
          // native_showtoast("解绑成功");
          // $$('#childshow ul').html("");
          // $$('#itemblock').html("");
          // $$('#childtab').html("");
          // userinfo();
          native_goto('local/finish');
     }else{
          native_showdialog(data.message);
     }
  }

  function errorCallBack(data){

  }

  function getParams(data){
   // data需要转成json调用 ，函数urlParamParseJson();
     /*var jodata = JSON.parse(data); 
     if(isNotNull(jodata)){//
        
     }*/

     userinfo();

}
    // 初始化
    $(function(){
      
      $.init();
    });
  </script>
</body>
</html>